<template>
  <div class="app-container">
    <!-- 筛选搜索 -->
    <a-form-model
    ref="queryForm"
    :model="queryParams"
    :label-col="{ span:6 }"
    :wrapper-col="{ span: 12 }"
    :rules="rules"
    class="search-wrapper">
      <a-row :gutter="[8,8]">
        <a-col :span="5">
          <a-form-model-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="接口名称"
          prop="apiName">
            <a-input v-model="queryParams.apiName" placeholder="请输入名称"></a-input>
          </a-form-model-item>
        </a-col>
        <a-col :span="5">
          <a-form-model-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="应用名称"
          prop="name">
            <a-input v-model="queryParams.name" placeholder="请输入名称" />
          </a-form-model-item>
        </a-col>
        <a-col :span="4">
          <a-form-model-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="请求结果"
          prop="success">
            <a-select v-model="queryParams.success" placeholder="请选择">
              <a-select-option v-for="item in result_options" :key="item.value" :label="item.label" :value="item.value">
                {{ item.label }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :span="10">
          <a-form-model-item label="开始时间">
            <a-range-picker
              :show-time="{ format: 'HH:mm' }"
              :value="showDateTime"
              format="YYYY-MM-DD HH:mm:ss"
              :placeholder="['开始时间', '结束时间']"
              @change="onChange"
              @ok="onOk"
            />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row justify="start">
        <a-col :span="5">
          <a-form-model-item label="耗时" prop="minTime">
            <a-input v-model="queryParams.minTime" placeholder="最小值" />
          </a-form-model-item>
        </a-col>
        <a-col :span="5">
          <a-form-model-item prop="maxTime">
            <a-input v-model="queryParams.maxTime" placeholder="最大值" />
          </a-form-model-item>
        </a-col>
        <a-col :span="2" :offset="10">
          <a-form-model-item>
            <a-button style="background-color: #0052D9; color: white;" @click="handleQuery"><a-icon type="search" />查询</a-button>
          </a-form-model-item>
        </a-col>
        <a-col :span="2">
          <a-form-item>
            <a-button style="background-color: white; color: black; border-color: rgb(128,128,128);" @click="resetForm"><a-icon type="delete" />重置</a-button>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form-model>
    <!-- Table -->
    <a-table :columns="columns"
      :dataSource="logList"
      :pagination="mypagination"
      :rowKey="record => record.id"
      :loading="loading"
      @change="handleTableChange"
      bordered>
      <span slot="status" slot-scope="text,record,index">
        <span style="display: flex; justify-content: center; align-items: center;">
          <span slot="reference" v-if="record.success === 0" style="margin-right: 5px;">
            <i class="dotClass" style="background-color: #F56C6C; float:left"></i>
            <span style="float: left;">失败</span>
          </span>
          <span slot="reference" v-if="record.success === 1" style="margin-right: 5px;">
            <i class="dotClass" style="background-color: #67C23A; float:left"></i>
            <span style="float: left;">成功</span>
          </span>
        </span>
      </span>
      <span slot="action" slot-scope="text,record,index">
        <a-button type="link" size="small" style="color: #0052D9;"
          @click="logDetail(record)">查看
        </a-button>
      </span>
    </a-table>
    <!-- 日志 -->
    <a-modal :title="title" :footer="null" width="40%" :body-style="bodyStyle" v-model:visible="open_log">
      <span v-html="message"></span>
    </a-modal>
  </div>
</template>

<script>
import { getListLog, getlogDetail } from "@/api/system/servicelog";

export default {
  name: "serviceLog",
  data() {
    const validTime = (rule, value, callback) => {
      let validScore = /^[+-]?([0-9]+([.][0-9]*)?|[.][0-9]+)$/;
      if ( value ) {
        if (validScore.test(value)) {
          callback()
        } else {
          callback( new Error("请输入正确的数字") )
        }
      } else {
        callback()
      }
    }
    return {
      open_log: false,
      showDateTime:null,
      message: '',
      // 表格数据
      logList: [],
      //pagination分页参数
      mypagination: ({
        // 总数据
        total: 0,
        // 每页条数
        pageSize: 10,
        // 当前页
        current: 1,
        // 显示多少页
        showTotal: (total) => `共 ${total} 条`,
        // 是否开启分页数据条数
        showSizeChanger: true,
        // 分页每页显示条数
        pageSizeOptions: ['10', '20', '30', '50'],
      }),
      loading: false,
      title: '',
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        name: null,
        apiName: null,
        startTime: null,
        endTime: null,
        maxTime: null,
        minTime: null,
        success: null
      },
      result_options: [
        {
          value: '',
          label: '全部'
        },
        {
          value: '0',
          label: '失败'
        },
        {
          value: '1',
          label: '成功'
        }
      ],
      labelCol: {
        xs: 8,
        sm: 8
      },
      wrapperCol: {
        xs: 8,
        sm: 16
      },
      bodyStyle: {
        height: '480px',
        overflow: 'hidden',
        overflowY: 'scroll'
      },
      //表格内容
      columns: [{
        title: '',
        customRender: (text, record, index) => index + 1,
        width: "5%",
        align: 'center',
      },
      {
        title: '应用名称',
        dataIndex: 'name',
        key: 'name',
      },
      {
        title: '接口名称',
        dataIndex: 'apiName',
        key: 'apiName',
      },
      {
        title: '用户IP',
        dataIndex: 'userIp',
        key: 'userIp',
        align: 'center',
      },
      {
        title: '接口地址',
        dataIndex: 'requestUrl',
        key: 'requestUrl',
        align: 'center',
      },
      {
        title: 'AppId',
        dataIndex: 'appId',
        key: 'appId',
        align: 'center',
      },
      {
        title: '接口参数',
        dataIndex: 'requestParam',
        key: 'requestParam',
        align: 'center',
      },
      {
        title: '开始时间',
        dataIndex: 'startTime',
        key: 'startTime',
        align: 'center',
      },
      {
        title: '结束时间',
        dataIndex: 'endTime',
        key: 'endTime',
        align: 'center',
      },
      {
        title: '耗时',
        dataIndex: 'executeTime',
        key: 'executeTime',
        align: 'center',
      },
      {
        title: '请求结果',
        dataIndex: 'success',
        key: 'success',
        scopedSlots: { customRender: 'status' },
        width: "7%",
        align: 'center',
      },
      {
        title: '操作',
        scopedSlots: { customRender: 'action' },
        align: 'center',
      }],
      rules: {
        minTime: [
          { required: false, validator: validTime, trigger: "blur" }
        ],
        maxTime: [
          { required: false, validator: validTime, trigger: "blur" }
        ]
      }
    }
  },
  created() {
    this.getList();
  },
  methods: {
    // 查询列表 queryParams
    getList(){
      this.loading = true;
      getListLog(this.queryParams).then(response => {
        this.logList = response.rows
        this.mypagination.total = response.total;
        this.total = response.total;
        this.loading = false;
      })
    },
    /** 查询按钮操作 */
    handleQuery(){
      this.$refs.queryForm.validate((valid) => {
        if ( valid ) {
          this.getList()
        } else {
          return false
        }
      })
    },
    /** table change排序和分页处理 */
    handleTableChange(pagination){
      this.queryParams.pageNum = pagination.current
      this.queryParams.pageSize = pagination.pageSize
      let { current, pageSize } = pagination
      this.mypagination = Object.assign(this.mypagination, { current, pageSize })
      this.getList()
    },
    // 重置查询
    resetForm() {
      this.queryParams.pageNum = 1
      this.showDateTime = null;
      this.$refs.queryForm.resetFields()
      this.queryParams.startTime = null
      this.queryParams.endTime = null
      this.getList()
      // console.log(this.queryParams)
    },
    resultFormat(row, column, cellValue) {
      if( cellValue === 0 ) {
        return "失败"
      }
      if ( cellValue === 1) {
        return "成功"
      }
    },
    onChange(value, dateString) {
      this.showDateTime = value;
      this.queryParams.startTime = dateString[0]
      this.queryParams.endTime = dateString[1]
    },
    onOk(value) {
      // console.log("OnOK")
    },
    logDetail(row) {
      getlogDetail(row.id).then(response => {
        let temp = response.msg
        this.message = JSON.stringify(temp, null, 10)
        // console.log(this.message)
      })
      this.title = '日志'
      this.open_log = true
    }
  }
}
</script>

<style scoped lang="scss">
.search-wrapper {
  padding-top: 30px;
  padding-bottom: 10px;
  padding-left: 10px;
  margin-bottom: 20px;
  overflow: hidden;
  border-width: 5px;
  border-color: rgba(0, 0, 0);
  box-shadow: 2px 2px 10px rgba(0, 0, 0, .25);
}
.dotClass {
  width: 8px;
  height: 8px;
  margin-top: 6px;
  margin-right: 2px;
  border-radius: 50%;
  display: block;
}
.ant-form-item-label {
  font-size: 10px;
}

</style>
